import Taro, { Config } from '@tarojs/taro'
import { Navigator, Text, View } from '@tarojs/components'

import './recommend.scss'
import PageView from "../../../components/PageView/PageView";
import CardRow from "../../../components/CardRow/CardRow";
import { AtTag } from "taro-ui";
import FlexView from "../../../components/FlexView/FlexView";
import SplitLine from "../../../components/SplitLine/SplitLine";

interface IProps {
    // find: IFindStore;
    // dispatch: IDispatch;
    init: boolean;
    loading: boolean;
    onReload: () => void;
}

export default class Recommend extends Taro.Component<IProps, {}> {

    /**
     * 指定config的类型声明为: Taro.Config
     *
     * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
     * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
     * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
     */
    config: Config = {
        navigationBarTitleText: '发现'
    };

    state = {};

    defaultProps = {
        // find: {
        //     books: {}
        // }
    } as IProps;

    constructor() {
        super();
        this.state = {}
    }

    componentWillMount() {
    }

    componentDidMount() {
    }

    componentWillUnmount() {
    }

    componentDidShow() {
    }

    componentDidHide() {
    }

    render() {
        const {init, loading, onReload} = this.props;
        const page_list = [
            {
                "id": "820000201203042643",
                "cover": "https://user-gold-cdn.xitu.io/2018/5/17/1636d772f3d23cf1",
                "title": "高事儿通",
                "desc": "权素压包许走革市养拉志造路生器思。活场深步料验传织七目力步该王志世。意思和究你好没得程十存快一原真条化。信他气石张规到定济月间青万院红变装。所角干统压斗具党传统根利究酸信。具情面认来个除员两划线切然其。果西八手几道率论全要物价通。",
                "user": "锺娜",
                "price": 71.2,
                "read_count": 4040,
                "tags": ["派共件"]
            }, {
                "id": "340000198607259540",
                "cover": "https://user-gold-cdn.xitu.io/2018/11/12/16706202cc6428df?imageslim",
                "title": "华根建属体",
                "desc": "特点者即张中响知听把们观更什内。可相取实标已义子本增系置阶物提。得过使与写支色是花面受清始积边。处工段道间界争农有他界两王万。又式调节保置决真土可研青收。快团队资前近京百做农地流水复便的场。",
                "user": "郭艳",
                "price": 72.5,
                "read_count": 5943,
                "tags": ["领看样"]
            }, {
                "id": "44000019991008127X",
                "cover": "https://user-gold-cdn.xitu.io/2018/4/9/162a9c24e48d274b",
                "title": "报完起里越物",
                "desc": "应划象带状即可业光道金格清万以律命声。内心易传油收很重电教选该没。更或作色广很到很出克水党造各受。才片门效米置区如近件式候形头但思。为么老府接部众没角况志品争题给马。且精积物江强角京口四容下千儿领以。",
                "user": "赵磊",
                "price": 123.6,
                "read_count": 4751,
                "tags": ["切他委", "非音"]
            }, {
                "id": "220000197711054869",
                "cover": "https://user-gold-cdn.xitu.io/2018/12/25/167e14942f2dcf44",
                "title": "清正然",
                "desc": "作发几装且下术们东难农与持做化才。会离件能月精安教参被间直下。化一多间道适连本队道果维示及。律形起一车路下参调业物清务步。般史到段过号等较身里易教月。",
                "user": "董丽",
                "price": 68,
                "read_count": 3608,
                "tags": ["然导", "机阶部", "志在严", "音空极"]
            }, {
                "id": "370000200003087886",
                "cover": "https://user-gold-cdn.xitu.io/2018/12/24/167df457c3d66fbd",
                "title": "条广府参",
                "desc": "断张马专六适分九示区位专则人过。主设价发我快流动党精什任列代气。离为使自头别元取学文通群万厂然程动。些六角将备低领元何场近会同。层物共这合本又约利安干部快社至。科想因边事己北是属主龙体深里识。",
                "user": "冯强",
                "price": 152,
                "read_count": 6759,
                "tags": ["有为细"]
            }, {
                "id": "230000200912126642",
                "cover": "https://user-gold-cdn.xitu.io/2018/9/11/165c7a188e490e48",
                "title": "近四厂是点",
                "desc": "所三次导化便那高斯相按提拉且算派效。养规今商设当府整深单都点类其通叫。复自则铁加学史亲铁学口率计声交我。术音利根思性阶响术以论采应所清提和斯。感历压能将通基并建山民公儿值。",
                "user": "郭秀兰",
                "price": 53.5,
                "read_count": 7859,
                "tags": ["加那却", "身进土"]
            }, {
                "id": "810000198701253682",
                "cover": "https://user-gold-cdn.xitu.io/2018/11/12/16706202cc6428df?imageslim",
                "title": "无始变率给达",
                "desc": "斗品心可反转段得每将半条将类。式极研准可回断的业五车主又切世数些收。接种反象办的四达拉相多心管。合局空者数起有斯领如准色。求并队验算产程两风且好江。",
                "user": "马强",
                "price": 175,
                "read_count": 9159,
                "tags": ["这风", "连名", "流江"]
            }, {
                "id": "520000201210241578",
                "cover": "https://user-gold-cdn.xitu.io/2018/9/11/165c7a188e490e48",
                "title": "与位员马根根",
                "desc": "九十表品值因据公西整温况段素公。头都般记低以风价节六样但切矿金。育产交斗到时带信存品等矿南严。力除热米亲名业往青层青进复。问理再厂社界层眼感区明能角月观达。包马圆器门自圆光才引等段公气五九然。",
                "user": "董艳",
                "price": 15,
                "read_count": 4078,
                "tags": ["平节东", "领多", "名再美", "应写对"]
            }, {
                "id": "370000198203211124",
                "cover": "https://user-gold-cdn.xitu.io/2018/5/17/1636d772f3d23cf1",
                "title": "制入制再",
                "desc": "半酸史式党铁构府图达都所作们听。写织选米历和标学团几指反何。细回联法知干极非放流报大确说。拉九出格积越资定特天叫平离件影入养。分非法基队年温要难百一便应改物。",
                "user": "沈刚",
                "price": 93,
                "read_count": 5848,
                "tags": ["火写", "派事内", "处其全"]
            }, {
                "id": "130000199104049424",
                "cover": "https://user-gold-cdn.xitu.io/2018/9/11/165c7a188e490e48",
                "title": "六直族关世",
                "desc": "律细到应精战毛中文命已称有关之候酸会。温果精太效正金求转半所程该社。其争状外风从在毛往什十金没入。按这科形划是强包火我品高织系就机多。级又积与标最南往团完集造家九书。带因广量门过劳别参年走必。层七几我民要间成至保美四也联细好提素。",
                "user": "雷娜",
                "price": 74,
                "read_count": 6279,
                "tags": ["圆比共"]
            }, {
                "id": "440000197612260537",
                "cover": "https://user-gold-cdn.xitu.io/2018/5/17/1636d772f3d23cf1",
                "title": "集对见",
                "desc": "加整界面传切容指究四时世好求并须式。矿必总原阶会叫铁体第布难适。构她时问在看形说派持斯取程受安半。基影指说养结带价话交查律九在时术。着做每眼更今工识由常是米常治报率类。",
                "user": "阎秀兰",
                "price": 100.8,
                "read_count": 8418,
                "tags": ["子消", "众真律"]
            }, {
                "id": "110000201412226978",
                "cover": "https://user-gold-cdn.xitu.io/2018/12/4/16779ed4b21a9fa5",
                "title": "原反料作明教",
                "desc": "观红十质联被红想周阶路时又论海离。阶验出教元及真报能山根便他千压。成影了江决标非动采集各别原。情四这水除海者都体低务志因。",
                "user": "薛敏",
                "price": 107.3,
                "read_count": 8264,
                "tags": ["本些", "北计"]
            }, {
                "id": "640000199308099466",
                "cover": "https://user-gold-cdn.xitu.io/2018/4/9/162a9c24e48d274b",
                "title": "报广劳构利",
                "desc": "制头县越规特制快全消可所计可图只完。己广况科期日除龙好形斯根党。之角标术治带圆动需形高常头基当非。先几意正种报务还已技民清她近可。家小信期加政线自相究结学决持发通土制。想山物行山己张作改我进车。",
                "user": "彭明",
                "price": 28,
                "read_count": 3643,
                "tags": ["究米", "号验热"]
            }, {
                "id": "990000198403032222",
                "cover": "https://user-gold-cdn.xitu.io/2018/12/4/16779ed4b21a9fa5",
                "title": "相林基验名得",
                "desc": "科思线断西拉称着质身电究。教话少期何值角白处体照回马适向。备每起面机没成达法出院之间。达克才思从置入求参些党会较。能济起几会示时天速量到素如达。战品在写上走力社被石子今六。",
                "user": "周刚",
                "price": 94,
                "read_count": 5375,
                "tags": ["制论才", "真从风"]
            }, {
                "id": "610000200909178733",
                "cover": "https://user-gold-cdn.xitu.io/2018/5/17/1636d772f3d23cf1",
                "title": "料团口",
                "desc": "全必真程间格角团管看色光。类究今都和三入直关任张查论议。展月许指外空局可业步物形先写须细。指的向确门代力张经步育的酸。社于只相深都特整又林周已温务两好局。",
                "user": "张丽",
                "price": 160.7,
                "read_count": 3624,
                "tags": ["转料", "者候主", "东百又"]
            }, {
                "id": "350000197504036480",
                "cover": "https://user-gold-cdn.xitu.io/2018/5/17/1636d772f3d23cf1",
                "title": "完他或路验",
                "desc": "万己需存声酸律热工只米下。法院公军北工百气场队约你声值林心。自龙南量华才向写它调工它命如。统但处究里象提党料面应离后。东水么受活市快志单称格写农是要光后。该值她提回信只便力问这重群世又。",
                "user": "刘桂英",
                "price": 154.5,
                "read_count": 2630,
                "tags": ["问例记", "有界", "许斗解"]
            }, {
                "id": "520000199312052217",
                "cover": "https://user-gold-cdn.xitu.io/2018/12/4/16779ed4b21a9fa5",
                "title": "采千议内收",
                "desc": "制七它力无压展需把成回计立深。所计对与天光领上会争十省部千。按酸方音拉选你光包合三习收世开带战。果油他车该矿数置线过难持。",
                "user": "田娜",
                "price": 64.3,
                "read_count": 9854,
                "tags": ["南观", "识选代", "器提", "么信而"]
            }, {
                "id": "440000197908275973",
                "cover": "https://user-gold-cdn.xitu.io/2018/12/24/167df457c3d66fbd",
                "title": "斯身感名",
                "desc": "委已直计金空每展支北着认联。听干周接可识元见养六究社交东平。次不千器复列本些基因火然次置江如。级标现金来低利般满者设对写构少。",
                "user": "董霞",
                "price": 12.5,
                "read_count": 2662,
                "tags": ["意形个", "同连业", "长周解"]
            }, {
                "id": "150000200305154510",
                "cover": "https://user-gold-cdn.xitu.io/2018/6/26/1643b682a5be1090?imageslim",
                "title": "布反作色往难",
                "desc": "金路认住建交儿些专动带任要阶离结保几。或至平较他劳九保青达何入率。等象发料表华对江提它型率按位放就。报月队林老克四学必研准设见半打素。确科身革美人万以节技养和派业此内。却直京子其头持线南改局精。织适角今情价样争属相族办族根属了力。",
                "user": "赵敏",
                "price": 104,
                "read_count": 3553,
                "tags": ["南品", "量一"]
            }, {
                "id": "120000201411047005",
                "cover": "https://user-gold-cdn.xitu.io/2018/12/4/16779ed4b21a9fa5",
                "title": "较放复县办强",
                "desc": "年到压率基认由置级热准备光斗没划回。之象天约近元太精应习式列今进号。流眼地又数线好海声群工制音了严世县和。济做条转明府况清西意长何备厂。世离要圆完干效张列力受造林。",
                "user": "范勇",
                "price": 69.7,
                "read_count": 3689,
                "tags": ["机对标", "区府"]
            }, {
                "id": "500000197710046389",
                "cover": "https://user-gold-cdn.xitu.io/2018/11/12/16706202cc6428df?imageslim",
                "title": "始交科布",
                "desc": "者府条我格变那自记制活但式本求。传标县义下志工起其法列清已东思。步同况定度区据半确学示情取社用月机。重头变他群象设习除市资引响。",
                "user": "夏洋",
                "price": 20,
                "read_count": 1978,
                "tags": ["较接则", "间指", "委历"]
            }, {
                "id": "65000019950519822X",
                "cover": "https://user-gold-cdn.xitu.io/2018/12/24/167df457c3d66fbd",
                "title": "能将难克况人回",
                "desc": "者被心合和大新从此成命军接也。合水入海就界示很山住包音西他时时解。保越算更准圆持为海间进军走西口矿九。期产及求太支张县年象党基被。深且化结处界世车数由书难率育采。计社建将行成话命查状战程。它于复利干三市林级该意山已重没具。",
                "user": "孟秀兰",
                "price": 33,
                "read_count": 1056,
                "tags": ["学正十", "千广", "及林角"]
            }, {
                "id": "210000198612316467",
                "cover": "https://user-gold-cdn.xitu.io/2018/5/17/1636d772f3d23cf1",
                "title": "能争别果象那从",
                "desc": "市为进切里求连如阶动克却放便众动存满。员学打花实给持器问实角流。道满百以程广计十记据拉外查。前委层定利心料意强改关节角铁资天给比。",
                "user": "叶娟",
                "price": 37,
                "read_count": 5421,
                "tags": ["受求", "始八", "土眼"]
            }, {
                "id": "360000201405274257",
                "cover": "https://user-gold-cdn.xitu.io/2018/12/24/167df457c3d66fbd",
                "title": "象你当图日器",
                "desc": "养例的基子复期记变华快三比入还先基。导些点导多们百千过于革看较。能书作我有件记教证果期如今之交立利比。而权三机且处元打统连化权因事条。问的张么比说自选此率因基广。般深种式各容取线设日点圆政意。",
                "user": "苏平",
                "price": 36.4,
                "read_count": 3240,
                "tags": ["得除并", "但队", "作六王"]
            }, {
                "id": "990000200007143828",
                "cover": "https://user-gold-cdn.xitu.io/2018/10/29/166bdaf831fa3cce",
                "title": "即品度六重这",
                "desc": "太之等知白从构想处温龙品公影温界时走。使速无才重众很更十把几机王。则离先红式住市史全道参论龙计圆造亲。界广却导子对中西极中部所着可。时出更非而象当说色文路完开西快生人界。院样二周称就布和示千选千切白记发书。分此克下民红种地照提程感记构导间。",
                "user": "林伟",
                "price": 33,
                "read_count": 6737,
                "tags": ["带级再", "转广段", "对花如"]
            }, {
                "id": "810000197703217955",
                "cover": "https://user-gold-cdn.xitu.io/2018/4/9/162a9c24e48d274b",
                "title": "构江社向",
                "desc": "张集因验儿明也养军团解确己毛产四。类提构界地委联号局委处工界。济百据支满家老小走响育存外。南花样准争量和场约农器来九题。习管片张领快王日动层机从。张派才国间七及和活统切叫支。流到深确市海族般是级严成眼。",
                "user": "黄强",
                "price": 49.2,
                "read_count": 9850,
                "tags": ["众包", "构速", "阶取象"]
            }, {
                "id": "620000199310023782",
                "cover": "https://user-gold-cdn.xitu.io/2018/5/17/1636d772f3d23cf1",
                "title": "在七头",
                "desc": "对明过由接且等济离老式四满。那科意使按法有在况作义持看应连。办约属系备京将命能教养定断几一油。住放速规查接候查斗立道较采资数。它周列无步调素红中后酸八结世象及速命。",
                "user": "刘刚",
                "price": 11,
                "read_count": 1985,
                "tags": ["步者己", "约少", "实整", "么领"]
            }, {
                "id": "460000200204049650",
                "cover": "https://user-gold-cdn.xitu.io/2018/5/17/1636d772f3d23cf1",
                "title": "则边重",
                "desc": "极意新国门基风加十积际物路有查际。海事气所打记说解龙前几活再已究叫强林。况精等色八真半北识分层复去。广与知准代意广难最适义一程和体。步主叫包很长快参养王价水价斗打。两上看压水务进亲治系离声了。已业业然因米一酸报山总看水水它常眼。",
                "user": "方娜",
                "price": 36,
                "read_count": 1044,
                "tags": ["除件", "六消县"]
            }, {
                "id": "820000200301313780",
                "cover": "https://user-gold-cdn.xitu.io/2018/4/9/162a9c24e48d274b",
                "title": "期工养",
                "desc": "同开果运少常十总识又目受路车不。小加条由更意少示机平合红压。土由农什月位精且体最引量也。能来安料采又门看共共里半世发。",
                "user": "孟强",
                "price": 122.7,
                "read_count": 9901,
                "tags": ["其志", "格学线", "许老"]
            }, {
                "id": "140000199004177359",
                "cover": "https://user-gold-cdn.xitu.io/2018/5/17/1636d772f3d23cf1",
                "title": "始种复林油",
                "desc": "局由你事被子石研大积长记程步说。员而治克中温清拉置积验格事院。手都边工则什六观如直矿干响查如了济。千书空照己济眼色目些声求定去人。志候调那往史中何改元派律花三还记。",
                "user": "罗静",
                "price": 63,
                "read_count": 8787,
                "tags": ["见为党", "半验"]
            }];
        return <PageView
            init={init}
            // error={error}
            className='page-view-tab'
            loading={loading}
            onReload={onReload}>
            <View className='tab-tow'>
                <View>
                    <View className='page-pd'><Text className='text-20 bold text-default'>书籍专栏</Text></View>
                    <View className=''>
                        {page_list && page_list.map((item, index) => {
                            return <Navigator key={index} url={'/pages/details'} className='pl-15 pr-15 pb-10 pt-10'>
                                <CardRow coverWidth={170} coverRatio={1} coverBorderRadius={5} image={item.cover}
                                         title={`${item.title}`}
                                         desc={item.desc}
                                         titleSize={15}
                                         renderMore={<View className='yd-tags'>
                                             {item.tags.map((tag, ti) => {
                                                 return <AtTag key={ti} size='small' className='yd-tag'>{tag}</AtTag>
                                             })}
                                         </View>}
                                         renderFooter={<FlexView align='flex-end' justify={"space-between"} className='mt-5'>
                                             <FlexView align='center' className='text-desc text-12'>
                                                 <Text>{item.user}</Text>
                                                 <SplitLine height={18}/>
                                                 <Text>{item.read_count}人在读</Text>
                                             </FlexView>
                                             <Text className='text-17 bold text-green' style={{lineHeight: 1}}>￥{item.price}</Text>
                                         </FlexView>}
                                />
                            </Navigator>
                        })}
                    </View>
                </View>
            </View>
        </PageView>
    }
}
